<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="Shortcut Icon" href="http://pic2.58.com/passport/images/58.ico" type="image/x-icon" />

<title>用户登录-58同城</title>

<script>
	function setTab(name, cursel, n, obj) {

		if (obj && obj.className != "hover") {

			$("#tipDiv").attr("class", "hc");

			$("#tipDiv").html("");

		}
		;

		for (i = 1; i <= n; i++) {

			var menu = document.getElementById(name + i);

			menu.className = i == cursel ? "hover" : "";

		}
		;

		if (cursel == 1) {

			document.getElementById("submitForm").action = "j_spring_security_check";

			document.getElementById("usernametr").style.display = "";

			document.getElementById("username").style.display = "";

			document.getElementById("mobiletr").style.display = "none";

			document.getElementById("mobile").style.display = "none";

			document.getElementById("mobile").className = "inp inw c_ccc";

			if (document.getElementById("mobile").value == "") {

				document.getElementById("mobile").value = "手机号";

			}

		} else {

			document.getElementById("submitForm").action = "j_spring_security_check";

			document.getElementById("mobiletr").style.display = "";

			document.getElementById("mobile").style.display = "";

			document.getElementById("usernametr").style.display = "none";

			document.getElementById("username").style.display = "none";

			document.getElementById("username").className = "inp inw c_ccc";

			if (document.getElementById("username").value == "") {

				document.getElementById("username").value = "用户名/电子邮箱";

			}

		}

		$("#password").attr("class", "inp inw");

		$("#password").val("");

	}
</script>


<link rel="stylesheet" href="http://pic2.58.com/ui6/my/css/login_6.css" type="text/css" />


<script src="/scripts/jqueryvalidate/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/scripts/jqueryvalidate/formValidator-4.1.1.js" type="text/javascript" charset="UTF-8"></script>
<script src="/scripts/jqueryvalidate/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
	$(document).ready(function() {
		//第一组校验组，默认组号为"1"
		$.formValidator.initConfig({
			formID : "submitForm",
			debug : false
		});

		$("#username").formValidator({
			onShowText : "请输入用户名",
			onCorrect : false,
			onShow : false,
			onFocus : false,
			onError : "你输入的用户名非法,请确认",
			tipID : "tipDiv"
		}).inputValidator({
			min : 4,
			max : 20,
			onFocus : false,
			onError : "你输入的用户名非法,请确认",
			onCorrect : false,
			onShow : false,
			tipID : "tipDiv"
		});

		$("#password").formValidator({
			onShow : false,
			onFocus : false,
			onCorrect : false,
			tipID : "tipDiv"
		}).inputValidator({
			min : 6,
			empty : {
				leftEmpty : false,
				rightEmpty : false,
				emptyError : "密码两边不能有空符号"
			},
			onError : "密码不能为空,至少6个长度,请确认"
		});

	});
</script>
</head>

<body>

	<form method="post" action="/j_spring_security_check" id="submitForm">

		<div id="login-header" class="win900">

			<a href="http://www.58.com" id="logo" style="left: 20px;"><img src="http://pic2.58.com/ui6/my/images/logo-49h.gif" alt="中文最大生活信息门户" /> </a>

			<div id="cityname" class="loginname" style="left: 208px;">
				<span>用户登录</span>
			</div>

			<div id="logintext" style="right: -10px;">
				<a href="http://www.58.com/">返回首页</a>|<a href="http://about.58.com/" target="_blank">帮助</a>
			</div>

		</div>

		<div class="cb win900">

			<div id="conleft">

				<!--图片轮播控件-->

				<div id="ibanner">

					<div id="ibanner_pic">
						<a><img src="http://pic2.58.com/ui6/my/images/sqlogin.jpg?201142519" /> </a>
					</div>

				</div>

			</div>

			<div id="conright">

				<ul class="login-scrool">

					<li class="hover" onclick="setTab('scrool',1,2,this)" id="scrool1"><em></em>账户登录</li>

					<li onclick="setTab('scrool',2,2,this)" id="scrool2"><em></em>手机登录</li>

				</ul>

				<div class="scrool-bg">

					<div class="loginbox">

						<div id="tipDiv"></div>

						<table>

							<tr id="usernametr">

								<th>账户名</th>
								<td><input class="inp inw c_ccc" type="text" id="username" name="j_username" size="20" value="用户名/电子邮箱" /></td>

							</tr>

							<tr id="mobiletr" style="display: none">

								<th>手机号</th>

								<td><input class="inp inw c_ccc" type="text" id="mobile" name="j_username2" onfocus='if (this.value == "手机号") this.value = "";this.className = "inp inw";' size="20" value="手机号" /></td>

							</tr>

							<tr id="passwordtr">

								<th>密 码</th>

								<td style="padding-bottom: 5px;"><input class="inp inw" id="password" type="password" style="margin-bottom: 7px;" name="j_password" size="20" onpaste="return false" value="" />
								</td>

							</tr>

							<tr>

								<th>&nbsp;</th>

								<td style="padding: 0pt;"><input type="checkbox" style="vertical-align: middle;" id="coks" value="on" name="remember" /> <label class="logintip" for="coks">30天内自动登录 (公共场所慎用)</label>
								</td>

							</tr>

							<tr>

								<th>&nbsp;</th>

								<td style="padding: 0;"><span class="butt" style="line-height: 34px;"> <input type="submit" name="submit" value="登录" class="btns" id="submit" /> </span><span class="reg-a"><a href="/reg">免费注册</a>|<a href="/forgetpassword">找回密码</a> </span>
								</td>

							</tr>

						</table>

					</div>

					<div class="link-login"></div>

				</div>
				<!--scrool bg-->

				<div class="clear"></div>

			</div>

			<div class="c"></div>

		</div>

		<div id="footer" class="win900">

			<p>
				&copy; 58.com <a class="fduihua" target="_blank" title="有问题请与58客服进行对话" href="http://about.58.com/">与58对话</a>
			</p>

		</div>

	</form>

	<script type="text/javascript">
		$("#scrool1").className = "hover";

		$("#scrool2").className = "";

		setTab('scrool', 1, 2);
	</script>

</body>

</html>